<template>
  <view class="card_necessary">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" left-icon="left" status-bar title="持有必中卡" />
    <view class="tab-content">
        <view class="cell flex-col-between" v-for="(item,index) in list" :key="index">
          <view class="cell-first flex-row-between-center">
            <view>
              <text class="monthly">{{item.title}}</text>
              <text class="term">{{item.tian}}天</text>
            </view>
            <text class="progress" v-if="item.status == 1">剩余天数{{item.tians}}天</text>
            <text class="progress" v-else>{{getstatus(item.status)}}</text>
          </view>
          <view class="cell-second flex-row-between-center">
            <view>
              <text class="purchase">购买价格</text>
              <text class="price">{{item.money}}</text>
            </view>
            <text class="time">{{item.time}}</text>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
  import {
    getMemberMiner
  } from '@/api/wincard/index.js'
  export default {
    data() {
      return {
        status:1 ,//传status把，0是未使用，1是已使用，2是已过期 0没用
        list:[]
      }
    },
    onLoad() {
      this.getList()
    },
    methods: {
      getstatus(val){
        return val == 0 ? '未使用' : val == 1 ? '已使用' : val == 2 ? '已过期' : ''
      },
      getList(){
      	// 调用接口
      	getMemberMiner({
          status:this.status
      	}).then(res => {
          this.list = res.data
          console.log('成功res=', res)
      	}).catch((e) => {
      	})
      },
    }
  }
</script>

<style lang="less" scoped>
  .tab-content {
    margin-top: 40rpx;
    .cell {
      height: 138rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 27rpx 18rpx 29rpx 78rpx;
      margin-top: 20rpx;
      .monthly {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .term {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 19rpx;
      }
      .progress {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .purchase {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .price {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #CBAE5E;
        margin-left: 16rpx;
      }
      .time {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
    }
  }
</style>